<template>
    <div>
        <el-row :gutter="12">
            <el-col :span="12" v-for="item in data">
                <el-card shadow="hover" :body-style="{ padding: 0 }">
                    <el-col style="border-bottom: 1px solid #ccc;" class="mt-10 titlebox">
                        <p class="title">{{ item.title }}</p>
                        <span>昨日</span>
                    </el-col>
                    <el-col style="border-bottom: 1px solid #ccc;" class="mt-10 content">
                        <p class="title2">{{ item.value }}</p>
                        <span>{{ item.day }}</span>
                        <span>{{ item.week }}</span>
                    </el-col>
                    <el-col class="mt-10 foo">
                        <span> {{ item.month }}</span>
                        <span>{{ item.money }}</span>
                    </el-col>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>

import { ref } from 'vue'
const data = ref([
    { title: "销售额", value: "7.62", day: "日环比-100%", week: "周环比+3.54%", month: "本月销售额", money: "0元" },
    { title: "用户访问量", value: "6.62", day: "日环比-60%", week: "周环比-13.54%", month: "本月销售额", money: "33元" },
    { title: "订单量", value: "5.62", day: "日环比-100%", week: "周环比-6.54%", month: "本月销售额", money: "999元" },
    { title: "新增用户  ", value: "3.62", day: "日环比-80%", week: "周环比-3.54%", month: "本月销售额", money: "66元" },
])
</script>

<style lang="scss" scoped>
.el-row {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    box-sizing: border-box;

}

.mt-10 {
    padding: 10px 0;
}

.titlebox {
    display: flex;
    justify-content: space-between;

    span {
        width: 32px;
        height: 18px;
        text-align: center;
        border: 1px solid #31e121;
        color: #31e121;
        font-size: 12px;
    }
}

.title {
    font-size: 18px;
}
.title2 {
    font-size: 24px;
    color: #b3b5b2;
}

.foo {
    display: flex;
    justify-content: space-between;
}
</style>